<template>
  <button :color="color"><slot /></button>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
button{
  font-size: 12px;
  background-color: #eee;
  color: #666666;
  display: inline-block;
  border-radius: 20px;
  padding: .2rem .8rem;
  border: 0;
  outline: 0;
  &[color="blue"]{
    color: #53B6FF;
    background-color: rgba(83, 182, 255, 0.12);
  }
  &[color="red"]{
    color: #FF5353;
    background-color: rgba(255, 83, 83, 0.12);
  }
  &[color="yellow"]{
    color: #FDB800;
    background-color: rgba(255, 186, 0, 0.12);
  }
  &[color="purple"]{
    color: #fd00c7;
    background-color: rgb(246 0 255 / 12%);
  }
}
</style>